<template>
  <div class="lis_sec">
    <div class="lib_aera" :class="{lib_areab:itemShowIndex === 2,lib_arear:itemShowIndex===3}">
      <div class="lib_border_tl"></div>
      <div class="lib_border_tr"></div>
      <div class="lib_menu">
        <div class="lib_menu_border">
          <div class="lib_menu_item">
            <a href="javascript:;" @click="itemShowIndex=1,radio='1'" :class="{active:itemShowIndex===1}">
              未知人员库
            </a>
          </div>
          <div class="lib_menu_item">
            <a href="javascript:;" @click="itemShowIndex=2,radio='2'" :class="{active:itemShowIndex===2}">
              在册人员库
            </a>
          </div>
          <div class="lib_menu_item">
            <a href="javascript:;" @click="itemShowIndex=3,radio='1'" :class="{active:itemShowIndex===3}">
              黑名单人员库
            </a>
          </div>
        </div>
      </div>
      <el-scrollbar>
        <div class="wrap_lib" ref="wrap_lib" @mousewheel="mousemove">
          <div class="lib_items1 animated" v-if="itemShowIndex===1" :class="{fadeIn:itemShowIndex===1}">
            <div class="lib_items" ref="content">
              <div class="lib_item" v-for="item in unknownlist" v-bind:key="item.id">
                <div class="imgbor" :style="{width:borWidth,height:borHeight}">
                  <div class="operation">
                  <span class="dropdown">
                    <img :src="dropdownpng"/>
                  </span>
                    <div class="dropitem">
                      <ul>
                        <li><a href="javascript:;" @click="move(item.id,item.imageidInFtp,true)"><i
                          class="fa fa-pencil"></i>
                          编辑并上传</a>
                        </li>
                        <!--<li><a href="javascript:;"><i class="fa fa-trash"></i> 删除</a></li>-->
                      </ul>
                    </div>
                  </div>
                  <div class="staffname">{{item.name ? item.name : '未识别'}}</div>
                  <img :src="picPath + item.imageidInFtp">
                </div>
              </div>
            </div>
          </div>
          <div class="lib_items2 animated" v-if="itemShowIndex===2" :class="{fadeIn:itemShowIndex===2}">
            <div class="lib_items" ref="content">
              <div class="lib_item" v-for="item in whitelist" v-bind:key="item.id">
                <div class="imgbor" :style="{width:borWidth,height:borHeight}">
                  <div class="operation">
                  <span class="dropdown">
                    <img :src="dropdownpng"/>
                  </span>
                    <div class="dropitem">
                      <ul>
                        <li><a href="javascript:;" @click="move(item.id,item.imageInFtpPath)"><i
                          class="fa fa-share"></i> 移动到其他库</a></li>
                        <li><a href="javascript:;" @click="delItem(item.id,item.imageInFtpPath)"><i
                          class="fa fa-trash"></i> 删除</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="staffname">{{item.name ? item.name : '未识别'}}</div>
                  <img :src="matchPath + item.id">
                </div>
              </div>
            </div>
          </div>
          <div class="lib_items3 animated" v-if="itemShowIndex===3" :class="{fadeIn:itemShowIndex===3}">
            <div class="lib_items" ref="content">
              <div class="lib_item" v-for="item in blacklist" v-bind:key="item.id">
                <div class="imgbor" :style="{width:borWidth,height:borHeight}">
                  <div class="operation">
                  <span class="dropdown">
                    <img :src="dropdownpng"/>
                  </span>
                    <div class="dropitem">
                      <ul>
                        <li><a href="javascript:;" @click="move(item.id,item.imageInFtpPath)"><i
                          class="fa fa-share"></i> 移动到其他库</a></li>
                        <li><a href="javascript:;" @click="delItem(item.id,item.imageInFtpPath)"><i
                          class="fa fa-trash"></i> 删除</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="staffname">{{item.name ? item.name : '未识别'}}</div>
                  <img :src="matchPath + item.id">
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="180">
      <el-row class="inputname" v-if="itemShowIndex===1">
        <el-col :span="6" class="text-right">
          头像：
        </el-col>
        <el-col :span="18">
          <el-upload
            class="avatar-uploader"
            :action=uploadPath
            :show-file-list="false"
            :on-success="uploadSuccess">
            <img v-if="uploadImageUrl" :src="picPath + uploadImageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
      <el-row class="inputname" v-if="itemShowIndex===1">
        <el-col :span="6" class="text-right">
          姓名：
        </el-col>
        <el-col :span="18">
          <el-form ref="form" :model="form">
            <el-form-item prop="nameInput" label="" :rules="[
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ]">
              <el-input v-model="form.nameInput"></el-input>
            </el-form-item>
          </el-form>
          <!--<el-input v-model="nameInput" placeholder="请输入姓名"></el-input>-->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="text-right libicont" v-if="itemShowIndex===1">
          上传到：
        </el-col>
        <el-col :span="18" :class="{wid100:itemShowIndex!==1}">
          <el-radio v-model="radio" label="1" v-if="itemShowIndex === 1 || itemShowIndex === 3">
            <div class="libicon">
              <img :src="libIcon1"/>
              <div class="title">在册人员库</div>
            </div>
          </el-radio>
          <el-radio v-model="radio" label="2" v-if="itemShowIndex === 2 || itemShowIndex === 3">
            <div class="libicon">
              <img :src="libIcon3"/>
              <div class="title">未知人员库</div>
            </div>
          </el-radio>
          <el-radio v-model="radio" label="3" v-if="itemShowIndex === 1 || itemShowIndex === 2">
            <div class="libicon">
              <img :src="libIcon2"/>
              <div class="title">黑名单</div>
            </div>
          </el-radio>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmMove" :disabled="btnDisable">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    /*height: 178px;*/
    height: auto;
    display: block;
  }
</style>
<script>
  export default {
    data() {
      return {
        form: {
          nameInput: ''
        },
        dialogVisible: false,
        dialogTitle: '移动到其他库',
//        nameInput: '',
        uploadImageUrl: '',
        radio: '1',
        uploadId: '',
        // 1:未知人员库 2:在册 3:黑名单
        itemShowIndex: 1,
        picPath: this.FSA + '/face/downloadftpPic?fileName=',
        uploadPath: this.FSA + '/face/uploadPic',
        matchPath: 'http://10.10.10.69:9001/verify/face/gets?imageId=',
        unknownlist: [],
        whitelist: [],
        blacklist: [],
        borWidth: '85%',
        borHeight: '',
        topArr: [],
        isBottom: false,
        checkId1: 0,
        checkId2: 0,
        checkId3: 0,
        btnDisable: false,
        nobodypng: require('@/assets/img/test1.jpg'),
        dropdownpng: require('@/assets/img/lib/dropdown.png'),
        libIcon1: require('@/assets/img/lib/libicon1.png'),
        libIcon2: require('@/assets/img/lib/libicon2.png'),
        libIcon3: require('@/assets/img/lib/libicon3.png')
      }
    },
    methods: {
      /* 滚动到底部加载数据 */
      mousemove() {
        var vm = this
        if (vm.topArr.length > 0 && vm.$refs['content'].getBoundingClientRect().top === vm.topArr[vm.topArr.length - 1]) {
          vm.topArr = [vm.$refs['content'].getBoundingClientRect().top]
          if (vm.$refs['content'].getBoundingClientRect().top < 0 && !vm.isBottom) {
            let unknownid = vm.itemShowIndex === 1 ? vm.unknownlist[vm.unknownlist.length - 1].id : 0
            let whiteid = vm.itemShowIndex === 2 ? vm.whitelist[vm.whitelist.length - 1].sortId : 0
            let blackid = vm.itemShowIndex === 3 ? vm.blacklist[vm.blacklist.length - 1].sortId : 0
            vm.isBottom = true
            vm.axios.post(vm.FSA + '/face/getFaceList', {
              pageSize: 20,
              unknownlist: unknownid,
              whitelist: whiteid,
              blacklist: blackid
            }).then(res => {
              if (vm.itemShowIndex === 1 && res.data.data.unknownlist.length > 0 && vm.checkId1 !== res.data.data.unknownlist[res.data.data.unknownlist.length - 1].id) {
                vm.unknownlist.push(...res.data.data.unknownlist)
                vm.checkId1 = res.data.data.unknownlist[res.data.data.unknownlist.length - 1].id
              }
              if (vm.itemShowIndex === 2 && res.data.data.whitelist.length > 0 && vm.checkId2 !== res.data.data.whitelist[res.data.data.whitelist.length - 1].id) {
                vm.whitelist.push(...res.data.data.whitelist)
                vm.checkId2 = res.data.data.whitelist[res.data.data.whitelist.length - 1].id
              }
              if (vm.itemShowIndex === 3 && res.data.data.blacklist.length > 0 && vm.checkId3 !== res.data.data.blacklist[res.data.data.blacklist.length - 1].id) {
                vm.blacklist.push(...res.data.data.blacklist)
                vm.checkId3 = res.data.data.blacklist[res.data.data.blacklist.length - 1].id
              }
//              console.log('bottom')
            }).catch(function (error) {
              console.log(error)
            })
          }
        } else {
          vm.topArr.push(vm.$refs['content'].getBoundingClientRect().top)
          vm.isBottom = false
        }
      },
      /* 删除 */
      delItem(itemId, filePath) {
        var vm = this
        vm.$confirm('此操作将删除该记录, 是否继续?', '提示', {
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'delBtn',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '删除中...'
              setTimeout(() => {
                done()
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                }, 300)
              }, 3000)
            } else {
              done()
            }
          }
        }).then(() => {
          var params = {
            filePath: filePath,
            imageId: itemId,
            fromDbName: vm.itemShowIndex === 2 ? 'whitelist' : 'blacklist'
          }
          vm.axios.post(vm.FSA + '/face/delete', params).then(res => {
            if (res.data.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              vm.$router.go(0)
            } else {
              vm.$message.error('删除失败!')
            }
          }).catch((error) => {
            console.log(error)
          })
        }).catch(() => {
          console.log('cancel')
        })
      },
      /* 移动 */
      confirmMove() {
        var vm = this
        vm.btnDisable = true
//        vm.$refs['form'].validate((valid) => {
//          if (valid) {
        /* 1:未知--》白名单 2:未知--》黑vm.名单 3:白名单--》未知 4:白名单--》黑名单 5:黑名单--》未知 6:黑名单--》白名单 */
        var type = 1
        var params = {}
        if (vm.itemShowIndex === 1) {
          if (parseInt(vm.radio) === 3) {
            type = 2
          }
          params = {
            type: type,
            filePath: vm.uploadImageUrl,
            name: vm.form.nameInput,
            logId: vm.uploadId
          }
        }
        if (parseInt(vm.radio) === 2) {
          type = 3
          if (vm.itemShowIndex === 3) {
            type = 5
          }
          params = {
            type: type,
            imageId: vm.uploadId
          }
        }
        if (vm.itemShowIndex === 2 && parseInt(vm.radio) === 3) {
          type = 4
          params = {
            type: type,
            imageId: vm.uploadId,
            filePath: vm.uploadImageUrl
          }
        }
        if (vm.itemShowIndex === 3 && parseInt(vm.radio) === 1) {
          type = 6
          params = {
            type: type,
            imageId: vm.uploadId,
            filePath: vm.uploadImageUrl
          }
        }
        if ((type === 1 || type === 2) && vm.form.nameInput === '') {
          vm.$message.error('请输入姓名!')
          vm.btnDisable = false
          return
        }
        vm.axios.post(this.FSA + '/face/move', params).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.$message({
              type: 'success',
              message: '移动成功!'
            })
            vm.$router.go(0)
          } else {
            vm.$message.error('移动失败!')
          }
          vm.dialogVisible = false
          vm.btnDisable = false
        }).catch(function (error) {
          console.log(error)
          vm.btnDisable = false
        })
//        vm.$router.go(0)
//          } else {
//            console.log('error submit!!')
//            return false
//          }
//        })
      },
      move(itemId, itemImg, unKnown) {
        if (unKnown) {
          this.dialogTitle = '编辑并上传'
          this.form.nameInput = ''
        }
        this.uploadImageUrl = itemImg
        this.uploadId = itemId
        this.dialogVisible = true
      },
      uploadSuccess(res) {
        if (res) {
          this.uploadImageUrl = res
        } else {
          this.$message.error('上传失败!')
        }
      }
    },
    mounted() {
      var vm = this
      // 设置图片大小
      vm.borWidth = (vm.$refs['wrap_lib'].getBoundingClientRect().width / 7) + 'px'
      vm.borHeight = (vm.$refs['wrap_lib'].getBoundingClientRect().width / 7 + 25) + 'px'
      window.onresize = () => {
        vm.borWidth = (vm.$refs['wrap_lib'].getBoundingClientRect().width / 7) + 'px'
        vm.borHeight = (vm.$refs['wrap_lib'].getBoundingClientRect().width / 7 + 25) + 'px'
      }
      this.axios.post(vm.FSA + '/face/getFaceList', {
        pageSize: 20,
        unknownlist: 0,
        whitelist: 0,
        blacklist: 0
      }).then(res => {
        vm.unknownlist = res.data.data.unknownlist
        vm.whitelist = res.data.data.whitelist
        vm.blacklist = res.data.data.blacklist
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
</script>
